<?xml version="1.0" encoding="utf-8" ?>
[#include "/WEB-INF/pages/common/taglibs.ftl"]
[#macro _script]
	<script type="text/javascript" src="[@c.url value='/js/plugins/jqwidgets/jqxlistbox.js'/]"></script>
	<script type="text/javascript">
		var base = (function(){
			// 事件绑定
			function _addEventListeners() {
				// Create jqxExpander
        		$('.jqxExpander').jqxExpander({showArrow: false, toggleMode: 'none', height: '500px', theme: base.config.theme });
			}
			function _addListBoxRender() {
				$('#roleFunctionForm').unbind().submit(function(){
    				var items = $('#jqxTree').jqxTree('getItems');
    				//var params = {};
    				var index = 0;
    				var _$form = $(this);
    				for(var i in items){
    					var item = items[i];
    					var _$item = $(item.element);
    					var id = _$item.attr('ckey');
    					var checked = item.checked;
    					if (checked == null) {
    						//checkbox=null(三值方框,有子节点被选中)
    						checked = true;
    					}
    					 _$form.append("<input type='hidden' name='roleFunctionList["+index+"].id' value="+id+" />");
    					 _$form.append("<input type='hidden' name='roleFunctionList["+index+"].enabled' value="+checked+" />");
    					//params['roleFunctionList['+index+'].id']=id;
    					//params['roleFunctionList['+index+'].enabled']=item.checked;
    					index++;
    				}
    				return true;
        		})
				
 				var source = [
 					[#list roleList as role]
						{ html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>${role.title}</span></div><span style='float: right; font-size: 13px; font-family: Verdana Arial;'><a href='[@c.url value='/manage/Role_edit.action?id=${role.id}'/]'>[编辑]</a></span>",	title:'${role.name}',label:'${role.id}'}[#if role_has_next],[/#if]
					[/#list]
                ];
                // Create jqxListBox
        		$("#jqxRoleShow").jqxListBox({ source: source, width: 198, height: 200, theme: base.config.theme });
			}
			// 页面渲染
			function _treeRender () {
				// Create jqxTree
            	$('#jqxTree').jqxTree({height:'450px;', hasThreeStates: true, checkboxes: true, theme: base.config.theme });
            }
            function _addListBoxListener() {
            	 $('#jqxRoleShow').unbind().bind('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxRoleShow').jqxListBox('getItem', args.index);
                    if (item != null) {
                        var url = "[@c.url value='/manage/RoleFunction_tree.action?currentPage=${currentPage}' /]";
                        $('#roleId').val(item.label);
                        $.get(url, {roleId:item.label, ajax:true, piece:true}, function(result){
                        	$('#siteFunctionTree').html(result);
                        	_addEventListeners();
                			_treeRender();
                			_addListBoxListener();
                        })
                    }
                });
            }
			return {
                config: {
                	url : null,
                    theme: null
                },
                init: function () {
                	_addEventListeners();
                	_addListBoxRender();
                	_treeRender();
                	_addListBoxListener();
                }
			}
		}());
		
		$(function(){
			var link = "[@c.url value='/manage/Role_list.action?currentPage=${currentPage}' /]";
			base.config.theme = getTheme();
			base.config.url = link;
            //Initializing the form
			base.init();
		})
	</script>
[/#macro]
[#if piece==true]
	[@_script /]
	<!--设置提交行为-->
	[#assign act="save" /]
	<!--设置table渲染到指定ID节点-->
	[#assign renderTo="#roleList"]
	[#include "/WEB-INF/pages/manage/_roleList.ftl"]
[#else]
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Insert title here</title>
		<meta name="menu" content="AdminMenu"/>
		<meta name="heading" content="heading"/>
		<style type="text/css">
			.role {
				padding:0;
				margain:0;
			}
			.role_list {
				/*height:500px;*/
				/*margin-left:252px;*/
				margin-left:4px;
				width:200px;
				float:left;
			}
			.siteFunction_tree {
				margin-left:208px;
			}
		</style>
		[@_script /]
	</head>
	<body id="body" class="role_content">
		<div class="role">
			<div id="roleList" class="role_list">
				<!--设置提交行为-->
				[#assign act="save" /]
				<!--设置table渲染到指定ID节点-->
				[#assign renderTo="#roleList"]
				[#include "/WEB-INF/pages/manage/_roleList.ftl"]
			</div>
			<div id="siteFunctionTree" class="siteFunction_tree">
				[#-- [@s.action name="RoleFunction_tree" executeResult="true" namespace="/manage"]
		    		[@s.param name="ajax" value="true" /]
		    	[/@s.action]--]
		    	<div class="jqxWidget">
					<div class="jqxExpander">
						<!--style="line-height:23px;"-->
						<div>站点角色功能管理</div>
						<!-- panel -->
						<div id="jqxTree">
							这里先写点说明性文字,或者来个‘loading’图标
						</div>
					</div>
				</div>
		    	<ul id="categoryTree" class="ztree"></ul>
			</div>
			<div style="clear: both;"></div>
			<form id="roleFunctionForm" method="post" action="[@c.url value='/manage/RoleFunction_enable.action'][@c.param name="backurl" value="${currentUrl}"/][/@c.url]">
				<div><input type="hidden" id="roleId" value="" name="roleId"/></div>
				<div><input type="submit" /></div>
			</form>
		</div>
	</body>
	</html>
[/#if]